<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>功能列表</title>
    <link href="<%=request.getContextPath()%>/views/sysdefault/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/views/sysdefault/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/views/sysdefault/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/views/sysdefault/css/animate.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/views/sysdefault/css/style.min.css?v=4.0.0" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/views/sysdefault/css/plugins/toastr/toastr.min.css" rel="stylesheet">
	
</head>

<body class="gray-bg">

	<!-- 导出 -->
	<form id="export" method="post" action="exportFunc.do">
		<input type="hidden" id="exportId" name="exportId" value="" />
	</form>
	
	<!-- 导入 -->
	<form id="import" method="post" action="importFunc.do" enctype="multipart/form-data">
		<input type="hidden" id="importId" name="importId" value="" />
		<input type="file" id="importFile" name="file" style="display: none;" onchange="importSub()" />
	</form>
    
    <div class="wrapper wrapper-content animated fadeInRight">
    	<div class="row">
            <div class="col-sm-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>功能列表</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                    
                    	<div class="m-b-sm">
                    		<button type="button" class="btn btn-success btn-sm" onclick="addFuncIndex();"><i class="fa fa-plus-square"></i>&nbsp;&nbsp;添加</button>
                    		<button type="button" class="btn btn-primary btn-sm" onclick="editFunc();"><i class="fa fa-edit"></i>&nbsp;&nbsp;编辑</button>
                    		<button type="button" class="btn btn-danger btn-sm" onclick="delFunc();"><i class="fa fa-times-circle"></i>&nbsp;&nbsp;删除</button>
                    		<button type="button" class="btn btn-success btn-sm" onclick="exportFunc();"><i class="fa fa-external-link"></i>&nbsp;&nbsp;导出</button>
                    		<button type="button" class="btn btn-info btn-sm" onclick="importFunc();"><i class="fa fa-download"></i>&nbsp;&nbsp;导入</button>
                    	</div>
                    	
                    	<div id="jstree1"></div>
                        
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5 id="funcTitle">添加功能</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        
                        <form id="subForm" method="post" class="form-horizontal" onsubmit="return addFunc()">
                        	<input type="hidden" name="funcId" />
                        	<div class="form-group">
                        		<label class="col-sm-3 control-label">功能名称</label>
                            	<div class="col-sm-9">
                            		<input type="text" name="funcName" placeholder="请输入功能名称" class="form-control" required="">
                            	</div>
                        	</div>
                        	<div class="form-group">
                        		<label class="col-sm-3 control-label">功能类型</label>
                            	<div class="col-sm-9">
                            		<select class="form-control" name="type">
                                        <option selected="selected" value="1">系统模块</option>
                                        <option value="2">功能菜单</option>
                                        <option value="3">页面连接</option>
                                        <option value="4">后台服务</option>
                                    </select>
                            	</div>
                        	</div>
                        	<div class="form-group">
                        		<label class="col-sm-3 control-label">访问级别</label>
                            	<div class="col-sm-9">
                            		<select class="form-control" name="acceType">
                                        <option selected="selected" value="2">授权</option>
                                        <option value="1">非授权</option>
                                    </select>
                            	</div>
                        	</div>
                        	<div class="form-group">
                        		<label class="col-sm-3 control-label">功能URL</label>
                            	<div class="col-sm-9">
                            		<input type="text" name="funcUrl" placeholder="请输入功能URL" class="form-control" required="">
                            	</div>
                        	</div>
                        	<div class="form-group">
                        		<label class="col-sm-3 control-label">功能图标</label>
                            	<div class="col-sm-9">
                            		<input type="text" name="icon" placeholder="请输入功能Icon" class="form-control" >
                            	</div>
                        	</div>
                        	<div class="form-group">
                        		<label class="col-sm-3 control-label">上级功能</label>
                            	<div class="col-sm-9">
                            		<input type="hidden" name="pid" >
                            		<input type="text" name="pName" disabled="" placeholder="功能结构列表Root" class="form-control">
                            	</div>
                        	</div>
                        	<div class="hr-line-dashed"></div>
                        	<div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button class="btn btn-primary" type="submit">保存内容</button>
                                    <button class="btn btn-white" onclick="clearFunc();" >清空</button>
                                </div>
                            </div>
                        
                        </form>
                        
                    </div>
                </div>
            </div>
        </div>
    
    </div>
    
    <script src="<%=request.getContextPath()%>/views/sysdefault/js/jquery.min.js?v=2.1.4"></script>
    <script src="<%=request.getContextPath()%>/views/sysdefault/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="<%=request.getContextPath()%>/views/sysdefault/js/content.min.js?v=1.0.0"></script>
    <script src="<%=request.getContextPath()%>/views/sysdefault/js/plugins/jsTree/jstree.min.js"></script>
    <script src="<%=request.getContextPath()%>/views/sysdefault/js/plugins/toastr/toastr.min.js"></script>
    <script src="<%=request.getContextPath()%>/views/sysdefault/js/plugins/layer/layer.js"></script>
    
    <script type="text/javascript">
    
    toastr.options = {
  		  "closeButton": true,
  		  "debug": false,
  		  "progressBar": true,
  		  "positionClass": "toast-top-left",
  		  "showDuration": "400",
  		  "hideDuration": "1000",
  		  "timeOut": "3000",
  		  "extendedTimeOut": "1000",
  		  "showEasing": "swing",
  		  "hideEasing": "linear",
  		  "showMethod": "fadeIn",
  		  "hideMethod": "fadeOut"
  		}
    
    var basePath = '<%=request.getContextPath()%>';
    /* 缓存被选中项的数据 */
    var flag = "edit"
    var id;
    var funcName;
    var pId;
    var pName;
    var funcType;
    var funcAcce;
    var funcOrder;
    var funcUrl;
    var funcIcon;
    
    $(document).ready(function() {
    	
    	var funcTree = ${funcTree};
    	var reg = new RegExp("<ul></ul>","g"); //创建正则RegExp对象
    	$("#jstree1").html(getTree(funcTree,-1).replace(reg, ""));
    	
        $("#jstree1").jstree({
            "core": {
                "check_callback": true
            },
            "plugins": ["types"],
            "types": {
                "default": {
                    "icon": "fa fa-file-code-o"
                },
                "root": {
                    "icon": "fa fa-folder"
                },
                "module": {
                    "icon": "fa fa-list-alt"
                },
                "menu": {
                    "icon": "fa fa-list-ul"
                },
                "link": {
                    "icon": "fa fa-chain"
                },
            }
        });
        
    });
    
    /* 缓存选项的功能信息 */
    function InfoCache(data){
    	var obj = $(data);
    	id = obj.attr("id");
    	funcName = obj.attr("name");
    	pId = obj.attr("pId");
    	pName = obj.attr("pName");
    	funcType = obj.attr("funcType");
    	funcAcce = obj.attr("funcAcce");
    	funcOrder = obj.attr("funcOrder");
    	funcUrl = obj.attr("funcUrl");
    	funcIcon = obj.attr("funcIcon");
    }
    
    var getTree = function(data, pId){
    	var tree; 
    	tree = '<ul>'; 
        
    	for(var i in data){
    		if(data[i].pId == pId){
    			
    			tree += '<li';
    			
    			if(data[i].open){
    				tree += ' class="jstree-open"'
    			}
    			
    			if(data[i].id == 0){
    				tree += ' data-jstree={"type":"root"}';
    			}else if(data[i].funcType == 1){
    				tree += ' data-jstree={"type":"module"}';
    			}else if(data[i].funcType == 2){
    				tree += ' data-jstree={"type":"menu"}';
    			}else if(data[i].funcType == 3){
    				tree += ' data-jstree={"type":"link"}';
    			}
    			
    			tree += '>';
    			
    			tree += "<a href='#' onclick='InfoCache(this);'"+ 
    				 "id='" + data[i].id +
                	 "' name='" + data[i].name + 
                	 "' pId='" + data[i].pId + 
                	 "' pName='" + data[i].pName + 
                	 "' funcType='" + data[i].funcType +
                	 "' funcAcce='" + data[i].funcAcce +
                	 "' funcOrder='" + data[i].funcOrder +
                	 "' funcUrl='" + data[i].funcUrl +
                	 "' funcIcon='" + data[i].funcIcon +
                	 "' >" 
                	 + data[i].name;
                tree += "</a>";
    			tree += getTree(data, data[i].id); 
                tree += "</li>";
    		}
    	}
    	
    	return tree+"</ul>";
    }
    
    var addFunc = function(){
    	
    	var index;
    	
    	$.ajax({
			type : "POST",
			url : basePath + "/system/addFunc.ido",
			data : $("#subForm").serialize(),
			dataType : "json",
			success : function(msg) { 
				if (msg.errCode == '1') {
					location.reload();
				} else {
					toastr.error(msg.errMsg, "提示");
				}
			
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				toastr.error("系统出错！", "提示");
			},
			beforeSend : function(XMLHttpRequest){
				index = layer.load(0, {
					  shade: [0.3,'#ccc'] //0.1透明度的白色背景
					});
			},
			complete : function(XMLHttpRequest, textStatus){
				layer.close(index);
			}
		});
	
		return false;
    }
    
    var editFunc = function(){
    	if(id == null || id == 0){
    		return;
    	}
    	$("input[name='funcId']").val(id);
    	$("input[name='funcName']").val(funcName);
    	$("input[name='funcUrl']").val(funcUrl);
    	$("input[name='pName']").val(pName);
    	$("input[name='pid']").val(pId);
    	$("select[name='type']").val(funcType);
    	$("select[name='acceType']").val(funcAcce);
    	$("input[name='icon']").val(funcIcon);
    	
    	$("#funcTitle").html("编辑功能");
    }
    
    var clearFunc = function(){
    	$("input[name='funcId']").val('');
    	$("input[name='funcName']").val('');
    	$("input[name='funcUrl']").val('');
    	$("input[name='pName']").val('');
    	$("input[name='pid']").val('');
    	$("select[name='type']").val('1');
    	$("select[name='acceType']").val('2');
    	$("input[name='icon']").val('');
    	
    	$("#funcTitle").html("添加功能");
    }
    
    var addFuncIndex = function(){
    	
    	if(pId == null){
    		toastr.warning("请选择上级功能！", "提示");
    		return;
    	}
    	
    	clearFunc();
    	
    	$("input[name='pName']").val(funcName);
    	$("input[name='pid']").val(id);
    }
    
    var delFunc = function(){
    	
    	if(id == null){
    		toastr.warning("请选择需要删除的功能！", "提示");
    		return;
    	}
    	
    	layer.confirm('删除功能会同时删除其所有子功能，确定要删除吗?', {icon: 3, title:'提示'}, function(mIndex){
    		
    		$.ajax({
    			type : "POST",
    			url : basePath + "/system/delFunc.ido",
    			data : {"funcId" : id},
    			dataType : "json",
    			success : function(msg) { 
    				if (msg.errCode == '1') {
    					location.reload();
    				} else {
    					toastr.error(msg.errMsg, "提示");
    				}
    			
    			},
    			error : function(XMLHttpRequest, textStatus, errorThrown) {
    				toastr.error("系统出错！", "提示");
    			},
    			beforeSend : function(XMLHttpRequest){
    				layer.load(0, {
    					  shade: [0.3,'#ccc'] //0.1透明度的白色背景
    					});
    			},
    			complete : function(XMLHttpRequest, textStatus){
    				layer.closeAll();
    			}
    		});
    		  
    	});
    	
    }
    
    //导出
    var exportFunc = function(){
    	
    	if(id == null){
    		
    		layer.confirm('确定要导出所有功能吗？', {
  			  btn: ['确定','取消'] //按钮
  			}, function(index){
  			  
  				layer.close(index);
  				
  				$("#export").submit();
  				
  			}, function(){
  			  
  			});
    		
    	}else{
    		
    		layer.confirm('确定要导出【'+funcName+'】功能及其子功能吗？', {
    			  btn: ['确定','取消'] //按钮
    			}, function(index){
    			  
    				layer.close(index);
    				
    				$("#exportId").val(id);
    				$("#export").submit();
    				
    			}, function(){
    			  
    		});
    		
    	}
    	
    }
    
    //导入
    var importFunc = function(){
    	
		if(id == null){
    		
    		layer.confirm('确定要从根目录功能吗？', {
  			  btn: ['确定','取消'] //按钮
  			}, function(index){
  			  
  				layer.close(index);
  				
  				$("#importFile").click();
  				
  			}, function(){
  			  
  			});
    		
    	}else{
    		
    		layer.confirm('确定要从【'+funcName+'】导入功能吗？', {
    			  btn: ['确定','取消'] //按钮
    			}, function(index){
    			  
    				layer.close(index);
    				
    				$("#importId").val(id);
    				$("#importFile").click();
    				
    			}, function(){
    			  
    		});
    		
    	}
    }
    
    //导入提交
    var importSub = function(){
    	if($("#importFile").val() != ''){
    		$("#import").submit();
    	}
    }
    
    </script>
    
</body>

</html>